<template>
  <div>
    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @multi-actions="handleMultiAction"
    >
      <template slot="filter-content">
        <el-input
          v-model="listQuery.params.name"
          style="width: 200px"
          placeholder="搜索课程名"
          class="filter-item"
        />
        <el-input
          v-model="listQuery.params.teachers"
          style="width: 200px"
          placeholder="搜索老师"
          class="filter-item"
        />

        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
        >
          添加
        </el-button>

        <el-button-group class="filter-item" style="float:  right">
          <el-button type="primary" size="small" icon="el-icon-upload2" @click="showImport">课程导入</el-button>
          <el-button type="primary" size="small" icon="el-icon-download" @click="exportExcel">课程导出</el-button>
          <el-button type="warning" size="small" icon="el-icon-upload" style="margin-left:  40px" @click="showImport2">选课名单导入</el-button>
        </el-button-group>

      </template>

      <template slot="data-columns">
        <el-table-column align="center" width="55" type="selection" />

        <el-table-column align="center" label="课程名" prop="name" />

        <el-table-column align="center" label="课时" prop="lessonPeriod" />

        <el-table-column align="center" label="类型">
          <template slot-scope="scope">
            {{ scope.row.lessonType | lessonTypeFilter }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="授课老师" prop="teachers" />

        <el-table-column align="center" label="创建时间" prop="createTime" />

        <el-table-column align="center" label="操作项" width="400">
          <template slot-scope="scope">
            <div>
              <el-button
                id="btnEdit"
                size="mini"
                type="warning"
                icon="el-icon-edit"
                @click.stop="handleUpdate(scope.row)"
              >编辑
              </el-button>
              <el-button
                id="btnDelete"
                size="mini"
                icon="el-icon-delete"
                type="danger"
                @click.stop="handleDelete(scope.row)"
              >删除</el-button>
              <el-button
                size="mini"
                icon="el-icon-plus"
                type="primary"
                @click.stop="handleAddStud(scope.row)"
              >添加学生</el-button>
              <el-button
                size="mini"
                type="success"
                icon="el-icon-share"
                @click="studentsDetail(scope.row)"
              >学生名单
              </el-button>
            </div>
          </template>
        </el-table-column>
      </template>
    </data-table>

    <el-dialog title="课程维护" :visible.sync="dialogVisible" width="500px">
      <el-form :model="formData" label-position="left" label-width="100px">
        <el-form-item label="课程名">
          <el-input v-model="formData.name" />
        </el-form-item>

        <el-form-item label="课时">
          <el-input v-model="formData.lessonPeriod" />
        </el-form-item>

        <el-form-item label="类型">
          <el-select
            v-model="formData.lessonType"
            placeholder="请选择课程类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="授课老师">
          <el-select
            v-model="formData.teacherIds"
            multiple
            collapse-tags
            style="width: 100%"
            placeholder="请选择授课老师"
          >
            <el-option
              v-for="item in teacherList"
              :key="item.id"
              :label="item.teacherName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="课程添加学生" :visible.sync="dialog2Visible" width="500px">
      <el-form :model="form2Data" label-position="left" label-width="100px">
        <el-form-item label="课程名">
          <el-input v-model="form2Data.name" />
        </el-form-item>

        <el-form-item label="授课老师">
          <el-select
            v-model="form2Data.teacherId"
            collapse-tags
            style="width: 100%"
            placeholder="请选择授课老师"
          >
            <el-option
              v-for="item in teacher2List"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="学生">
          <el-input
            v-model="studQuery.studName"
            placeholder="输入关键字进行过滤"
            style="marge"
          />
          <el-select
            v-model="form2Data.studentIds"
            multiple
            collapse-tags
            style="width: 100%"
            placeholder="请选择学生"
          >
            <el-option
              v-for="item in studentList"
              :key="item.id"
              :label="item.studentName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog2Visible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveStud">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="导入课程"
      :visible.sync="importVisible"
      width="30%"
    >

      <el-row>
        <el-button type="primary" @click="chooseFile">上传导入</el-button>
        <el-button type="warning" @click="downloadTemplate">下载导入模板</el-button>
        <input ref="upFile" class="file" name="file" type="file" style="display: none" @change="doImport">
      </el-row>

    </el-dialog>

    <el-dialog
      title="导入课程学生名单"
      :visible.sync="importVisible2"
      width="30%"
    >

      <el-row>
        <el-button type="primary" @click="chooseFile2">上传导入</el-button>
        <el-button type="warning" @click="downloadTemplate2">下载导入模板</el-button>
        <input ref="upFile" class="file" name="file" type="file" style="display: none" @change="doImport2">
      </el-row>

    </el-dialog>
  </div>
</template>

<script>
import DataTable from '@/components/DataTable'
import { saveData, fetchList, deleteData, fetchStudList, saveUserData, exportExcel, importExcel, importTemplate, importStudentsTemplate, importStudentsExcel } from '@/api/sys/lesson/lesson'

export default {
  name: 'SysLessonList',
  components: { DataTable },

  filters: {
    // 课程类型
    lessonTypeFilter(value) {
      const map = {
        0: '选修',
        1: '必修'
      }
      return map[value]
    }
  },

  data() {
    return {
      typeOptions: [
        {
          value: 0,
          label: '选修'
        },
        {
          value: 1,
          label: '必修'
        }
      ],

      dialogVisible: false,
      dialog2Visible: false,
      importVisible: false,
      importVisible2: false,

      listQuery: {
        current: 1,
        size: 10,
        params: {}
      },
      studQuery: { },

      lesson: {
        id: '',
        lessonId: '',
        lessonName: ''
      },

      formData: {},
      form2Data: {},

      options: {
        // 列表请求URL
        listUrl: '/exam/api/sys/lesson/paging',
        deleteUrl: '/exam/api/sys/lesson/delete',
        // 批量操作列表
        multiActions: [
          {
            value: 'delete',
            label: '删除'
          }
        ]
      },
      teacherList: [],
      teacher2List: [],
      studentList: []
    }
  },
  watch: {

    // 检测查询变化
    studQuery: {
      handler() {
        this.getStudentList()
      },
      deep: true
    }
  },

  methods: {
    handleAdd() {
      this.formData = {}
      this.dialogVisible = true
      fetchList().then((response) => {
        this.teacherList = response.data
      })
    },

    handleAddStud(row) {
      this.dialog2Visible = true
      this.form2Data.lessonId = row.id
      this.form2Data.name = row.name
      this.teacher2List = row.teacherList
      this.studQuery.lessonId = row.id
      this.getStudentList()
    },

    getStudentList() {
      this.studQuery.t = new Date().getTime()
      fetchStudList(this.studQuery).then(response => {
        this.studentList = response.data
      })
    },

    handleUpdate(row) {
      this.dialogVisible = true
      fetchList().then((response) => {
        this.teacherList = response.data
      })
      this.formData = row
      this.formData.teacherIds = row.teacherIds
    },

    handleSave() {
      saveData(this.formData).then(() => {
        this.$message({
          type: 'success',
          message: '课程修改成功!'
        })
        this.dialogVisible = false
        this.$refs.pagingTable.getList()
      })
    },

    handleSaveStud() {
      saveUserData(this.form2Data).then(() => {
        this.$message({
          type: 'success',
          message: '添加学生成功!'
        })
        this.dialog2Visible = false
      })
    },

    // 批量操作监听
    handleMultiAction(obj) {
      if (obj.opt === 'cancel') {
        this.handleCancelOrder(obj.ids)
      }
    },

    studentsDetail(row) {
      this.lesson.lessonId = row.id
      this.lesson.lessonName = row.name
      this.$router.push({ name: 'StudentList', params: { lesson: this.lesson }})
    },

    /**
     * 点击批量删除按钮
     */
    handleDelete(row) {
      this.lesson.id = row.id
      this.$confirm('确定删除该课程吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((result) => {
        deleteData(this.lesson).then((response) => {
          // eslint-disable-next-line no-sequences
          this.$message.success('删除成功'),
          this.$refs.pagingTable.getList()
        })
      })
    },

    exportExcel() {
      // 导出当前查询的数据
      exportExcel(this.listQuery.params)
    },

    downloadTemplate() {
      importTemplate()
    },

    showImport() {
      this.importVisible = true
    },

    chooseFile: function() {
      this.$refs.upFile.dispatchEvent(new MouseEvent('click'))
    },

    doImport(e) {
      const file = e.target.files[0]

      importExcel(file).then(res => {
        if (res.code !== 0) {
          this.$alert(res.data.msg, '导入信息', {
            dangerouslyUseHTMLString: true
          })
        } else {
          this.$message({
            message: '数据导入成功！',
            type: 'success'
          })

          this.importVisible = false
          this.$refs.pagingTable.getList()
        }
      })
    },
    showImport2() {
      this.importVisible2 = true
    },
    downloadTemplate2() {
      importStudentsTemplate()
    },
    chooseFile2: function() {
      this.$refs.upFile.dispatchEvent(new MouseEvent('click'))
    },

    doImport2(e) {
      const file = e.target.files[0]

      importStudentsExcel(file).then(res => {
        if (res.code !== 0) {
          this.$alert(res.data.msg, '导入信息')
        } else {
          this.$message({
            message: '数据导入成功！',
            type: 'success'
          })

          this.importVisible = false
        }
      })
    }
  }

}
</script>
